<template>
  <div class="home-container">
    <van-nav-bar  class="app-nav-bar">
        <template  #left>
          <div class="site-logo-item"></div>
        </template>
      <template #right>
        <van-button round text="搜索" class="search-btn" icon="search" color="#5babfb"></van-button>
      </template>
    </van-nav-bar>
    <div>
      <div class="home-content">
        <van-tabs @click="channelIsClick" class="channel-tabs" line-width="20px" v-model:active="active">
          <van-tab   :title="channel.name" v-for="channel in userChannels.channels" :key="channel.id">
            <article-list :active="active"  :channel="channel"/>
          </van-tab>
          <template #nav-right>
            <van-icon  class="wap-nav-wrap" name="wap-nav" @click="isChannelEditShow=true"/>
          </template>
      </van-tabs>
      </div>
    </div>
    <van-popup v-model:show="isChannelEditShow" close-icon-position="top-left" position="bottom" class="channel-edit-popup" teleport="body" style="height:100%;" closeable>
      <channel-edit :active="active" :user-channels="userChannels.channels" @update-active="active = $event" @close="isChannelEditShow = false"/>
    </van-popup>
  </div>
</template>

<script lang="ts" setup>
import { Toast } from 'vant'
import { getUserChannels }  from 'api/user'
import { onMounted, ref, reactive,  } from 'vue'
import ArticleList from './components/article-list.vue'
import ChannelEdit from './components/channel-edit.vue'
import { useStore } from 'vuex'

Components:{
  ArticleList
  ChannelEdit
}

let active = ref<number>(0)
let userChannels = reactive<any>({
  channels:[]
})

const store = useStore()

let isChannelEditShow = ref<boolean>(false)

const loadChannels = async () => {
  try {
    let resp = await getUserChannels()
    if(resp && resp.status == 200) {
      const { data } = resp.data
      userChannels.channels = data.channels
    }
  } catch (err) {
    Toast.fail({type:'fail',message:err,position:'top'})
  }
}


const channelIsClick = () => {
  store.commit('setActive',active.value)
}


onMounted(() => {
  loadChannels()
  active.value = store.state.article.isActive
})

</script>

<style lang="scss" scoped>
  .home-container {
    .app-nav-bar {
      .site-logo-item {
        width: 100px;
        height: 30px;
        background-size: cover ;
        background-image: url(assets/images/logo.png);
      }
      ::v-deep .van-nav-bar__title{
        max-width: unset;
      }
      .search-btn {
        width: 165px;
        height: 28px;
      }
    }
    .home-content {
      top: 46px;
      ::v-deep .van-tab {
        border-right: 1px solid #edeff3;
        border-bottom: 1px solid #edeff3;
      }
      ::v-deep .van-tabs__line {
        bottom: 20px;
        width: 15px!important;
        height: 3px;
          background:#3296fa
        }

        .wap-nav-wrap {
          position: fixed;
          right: 0;
          height: 44px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #fff;
          opacity: .9;
          .van-icon {
            font-size:20px;
          }

          .wap-nav-placeholder {
            width: 33px;
            flex-shrink: 0;
          }
        }
    }

    .channel-edit-popup {
      height: 100%;
    }
  }
</style>